<!-- 图文并排布局 -->
<template>
	<view class="container">
		<view class="item-box" v-for="item in props.dataList" :key="item.id" >
			<view class="item-header" @click="handleDetails(item.id)">
				<image :src="item.userAvatar"/>
				<view>
					<text>{{item.userName}}</text>
					<text>{{functions.timeText(item.publishTime)}}</text>
					<!-- <text>{{item.publishTime}}</text> -->
				</view>
			</view>
			<view class="item-imgs" @click="handleDetails(item.id)">
				<image v-for="imgs in item.bannerList" :key="imgs" :src="imgs"/>
			</view>
			<view class="item-share"> 
				<view class="share-i" @click.stop="toShare">
					<image src="../../static/share.svg"/>
					<text>分享</text>
				</view>
				<view class="share-right">
					<view class="share-i">
						<image src="../../static/msg.svg"/>
						<text>{{item.commentNumber}}</text>
					</view>
					<view class="share-i" @click.stop="changeCollect(item.id,item.isCollection)">
						<image v-if="item.isCollection" src="../../static/collect.svg"/>
						<image v-else src="../../static/no-collect.svg"/>
						<text>{{item.collection}}</text>
					</view>
					<view class="share-i" @click.stop="changeLike(item.id,item.isLike)">
						<image v-if="item.isLike" src="../../static/like.svg"/>
						<image v-else src="../../static/abreast-no-like.svg"/>
						<text>{{item.likes}}</text>
					</view>
				</view>
			</view>
			<view class="item-text">{{item.title}}</view>
			<view class="item-content"></view>
			<view class="item-topicId">
				<text v-for="topic in item.topics" :key="topic.id">#{{topic.name}}</text>
			</view>
			<view class="item-comment">
				<image src="../../static/auth.svg"/>
				<input @focus="inputFocus(item.id)" type="text" placeholder="留下你的评论吧" placeholder-style="font-weight: 400;font-size: 22rpx;color: #A9A7B1;"> 
			</view>
		</view>

		<!-- 分享弹框 -->
		<popupShare ref="popupShareRef" :id="0"></popupShare>
	</view>
</template>

<script setup>
  import { ref,reactive, computed, onMounted,watch } from "vue";
	import request from '@/http/request.js';
	import functions from '@/utils/functions.js';
	import { artSaveLike,artSaveCollect } from '@/api/posting.js'
	// import {useSwiperItem} from '@/composables/swiperItem.js'
	// const {paging,dataList,firstLoaded,isCurrentPage,props,queryList} = useSwiperItem()
  const props = defineProps({
		dataList: {
			type: Array,
			default: []
		}
	});
	const emit = defineEmits([
		"refresh",
	]);
 
	const popupShareRef = ref(null)

	watch(() => props.dataList, (newVal) => {
  	// console.log('============abresrCon dataList 变化了 ',newVal);
	}, {
		immediate: true
	});

	// 查看详情
	const handleDetails = (id) => {
		uni.navigateTo({
			url:`/pages/postDetails/index?id=${id}`
		})
	}

		//帖子点赞
	const changeLike = async (id,isLike) => {
		let res = await artSaveLike({
			dataId:id,
			status:isLike ? 2 : 1,  //1点赞  2 取消点赞
			type:1    	//类型:1帖子,2评论
		})
		emit('refresh',() => {
			uni.showToast({
				title: isLike?'已取消点赞':'点赞成功',
				icon:'none',
				duration: 2000
			});
		})
	}

	//帖子收藏
	const changeCollect = async (id,isCollection) => {
		let res = await artSaveCollect({
			articleId: id,
			status: isCollection ? 2 : 1  //1收藏  2 取消收藏
		})
		emit('refresh',() => {
			uni.showToast({
				title: isCollection?'已取消收藏':'收藏成功',
				icon:'none',
				duration: 2000
			});
		})
	}

	//分享
	const toShare = () => {
		// console.log('popupShare.value',popupShare.value);
		popupShareRef.value.open('bottom')
	}

	const inputFocus = (id) => {
		uni.navigateTo({
			url:`/pages/postDetails/index?id=${id}&isComment=true`
		})
	}

</script>

<style lang="scss" scoped>
	.container{
		/* background-color: #F4F4F4; */
		/* padding-top: 24rpx;
		padding-bottom: 118rpx;
		flex: 1; */
		height: auto;
		padding: 24rpx 0 1rpx 0;
		background-color: #F4F4F4;
		.item-box{
			width: 750rpx;
			padding: 30rpx;
			background-color:white;
			box-sizing: border-box;
			margin-bottom: 24rpx;
			.item-header{
				width: 690rpx;
				height: 64rpx;
				@include flex(row,flex-start);
				>image{
					width: 64rpx;
					height: 64rpx;
					margin-right: 16rpx;
					border-radius: 32rpx;
				}
				>view{
					height: 64rpx;
					@include flex(column,space-between,flex-start);
					>text:nth-of-type(1){
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
						line-height: 28rpx;
					}
					>text:nth-of-type(2){
						font-weight: 400;
						font-size: 24rpx;
						color: #7F808C;
					}
				}
			}
			.item-imgs{
				width: 690rpx;
				margin: 24rpx 0 16rpx 0;
				@include flex(row,flex-start,flex-start,wrap);
				>image{
					width: 224rpx;
					height: 224rpx;
					margin-bottom: 8rpx;
					/* margin-right: 9rpx; */

				}
				>image:nth-of-type(3n+2){
					margin-left: 9rpx;
					margin-right: 9rpx;
				}
			}
			.item-share{
				width: 690rpx;
				height: 70rpx;
				margin-bottom: 36rpx;
				@include flex(row,space-between);
				.share-i{
					width: 50rpx;
					height: 70rpx;
					@include flex(column,space-between,center);
					image{
						width: 40rpx;
						height: 40rpx;
					}
					text{
						font-weight: 400;
						font-size: 20rpx;
						color: #7F808C;
					}
				}
				.share-right{
					width: 170rpx;
					@include flex(row,space-between);
				}
			}
			.item-text{
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
				margin-bottom: 30rpx;
			}
			.item-topicId{
				height: auto;
				margin-bottom: 24rpx;
				text{
					font-weight: 400;
					font-size: 28rpx;
					color: #0BB1B0;
					margin-right: 12rpx;
				}
			}
			.item-comment{
				width: 690rpx;
				height: 60rpx;
				@include flex(row,space-between);
				>image{
					width: 60rpx;
					height: 60rpx;
					border-radius: 30rpx;
				}
				>input{
					width: 600rpx;
					height: 60rpx;
					box-sizing: border-box;
					background: #F4F3F7;
					border-radius: 60rpx;
					padding: 6rpx 30rpx;
					color: #707070;
					font-size: 26rpx;
				}
			}
		}
	}
</style>